<html>

<head>
    <title>用户信息系统</title>
    <meta charset="UTF-8">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/area.js"></script>
    <script src="./js/select.js"></script>
    <style>
        .top-right{
            float: right;
            margin-right: 30px;
        }
    </style>

    <script>
        $(
            function showAccount(){
                $.ajax({
                    url: "userInfo/showAccount",
                    type: "get",
                    dataType: "text",
                    success: function (res) {
                        console.log("res是"+res)
                        document.getElementById("showAccount").textContent=res;
                        if(res==""||res==null){
                            // document.getElementById("exit").style.display="none"
                            $("#exit").hide();
                        }else {
                            // document.getElementById("login").style.display="none"
                            $("#login").hide();
                        }
                    },
                    complete: function (err) {
                        console.log(err)
                    }
                });
            }
        )

        function tExit(){
            $.ajax({
                url:"userInfo/exit",
                type:"get",
                success:function (res){
                    window.location.href="./index.html"
                },
                complete:function (err){
                    console.log(err)
                }
            })
        }


        // 获取分页数据
        $(function () { // DOM 加载完毕默认要执行的函数
            $.ajax({
                url: "userInfo/getAll",
                data: "pn=1",
                type: "get",
                success: function (result) {
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                }
            });
        })

        // 获取第几页的数据
        function toPage(pn) {
            console.log("获取第" + pn + "页数据");
            $.ajax({
                url: "userInfo/getAll",
                data: "pn=" + pn,
                type: "GET",
                success: function (result) { // 这里面是不是就包括有当前页是第几页
                    // console.log("第" + pn +"页数据",result)
                    // 重新构建数据table
                    buildUsersTab(result);
                    // 重新构建分页条
                    buildNavTab(result);
                    // 更新表格左下角的页码
                    updateCurrentPage(result.pageNum);
                }
            });
        }

        function updateCurrentPage(pageNum) {
            $("#currentPage").text(pageNum);
        }

        // 构建分页条
        function buildNavTab(result) {

            // $("#userstab tbody").empty(); // 这个是去掉表格数据
            $("#pnav").empty();
            console.log(result.hasPreviousPage + "---", result);
            var ul = $("<ul></ul>").addClass("pagination")
            var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href", "#"));
            var prePageLi;
            var nexPageLi;
            if (!result.hasPreviousPage) {
                prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage(" + (result.pageNum - 1) + ")'></a>").append("&laquo;").attr("href", "#")); // 上一页
            } else {
                prePageLi = $("<li></li>").append($("<a onclick='toPage(" + (result.pageNum - 1) + ")'></a>").append("&laquo;").attr("href", "#")); // 上一页
            }
            if (!result.hasNextPage) {
                nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage(" + (result.pageNum + 1) + ")'></a>").append("&raquo;").attr("href", "#")); // 下一页
            } else {
                nexPageLi = $("<li></li>").append($("<a onclick='toPage(" + (result.pageNum + 1) + ")'></a>").append("&raquo;").attr("href", "#")); // 下一页
            }

            var lastPageLi = $("<li></li>").append($("<a onclick='toPage(" + result.pages + ")'></a>").append("尾页").attr("href", "#"));
            ul.append(firstPageLi).append(prePageLi);
            // 遍历总的页数
            $.each(result.navigatepageNums, function (index, item) { // item 是分页条上的页码
                // 选中页要成为激活状态active
                var numli;
                if (result.pageNum == item) { // 后台返回的数据显示在表格里的页的数据（有个第几页） == 当前点的页码
                    numli = $("<li></li>").addClass("active").append($("<a onclick='toPage(" + item + ")'></a>").append(item));
                } else {
                    numli = $("<li></li>").append($("<a onclick='toPage(" + item + ")'></a>").append(item));
                }
                ul.append(numli);
            });


            ul.append(nexPageLi).append(lastPageLi);
            var nav = $("<nav></nav>").append(ul);
            nav.appendTo("#pnav");
        }

        function buildUsersTab(obj) {
            $("#userstab tbody").empty();
            // 得到obj中的LIST
            var users = obj.list;
            console.log(users);
            // users：遍历的集合list
            // item：每一条数据
            $.each(users, function (index, item) {
                var chebox = $("<td></td>").append("<input type='checkbox' name='chkbox"+item.id+"' value='"+item.id+"' onclick='getid("+item.id+")'>");
                var id = $("<td></td>").append(item.id);
                var name = $("<td></td>").append(item.name);
                var age = $("<td></td>").append(item.age);
                var gender = $("<td></td>").append(item.gender);
                var idNum = $("<td></td>").append(item.idNum);

                var province = $("<td></td>").append(item.province);
                var city = $("<td></td>").append(item.city);
                var region = $("<td></td>").append(item.region);
                var pcr = $("<td></td>").append(province).append(city).append(region)

                var address = $("<td></td>").append(item.address);

                var editBtn = $("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal2' onclick='edit(" + JSON.stringify(item) + ")'>编辑</button>");
                var deleteBtn = $("<button onclick=del(" + JSON.stringify(item) + ")>删除</button>").addClass("btn btn-danger");
                var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);

                $("<tr></tr>")
                    .append(chebox)
                    .append(id)
                    .append(name)
                    .append(age)
                    .append(gender)
                    .append(idNum)
                    .append(pcr)
                    .append(address)
                    .append(btnTd)
                    .appendTo("#userstab tbody");
            });
        }

        function getid(id){
            var chk = document.getElementsByName("chkbox"+id)
            if(chk[0].checked){
                document.getElementById("getId").value+=id+",";
            }else {
                var str = document.getElementById("getId").value.split(",")
                console.log(str)
                document.getElementById("getId").value=""
                for (let i = 0; i < str.length-1; i++) {
                    if(str[i]!=id){
                        document.getElementById("getId").value+=str[i]+","
                    }
                }
            }
        }

        function del(item) {
            if(this.confirm("确认删除？")){
                $.ajax({
                    url: "userInfo/delete",
                    data: {
                        id: item.id,
                        name:item.name,
                    },
                    type: "post",
                    success: function (result) {
                        if(result=="Y"){
                            alert("删除成功！")
                        }else if(result=="N"){
                            alert("您只能删除自己添加的！")
                        }else if(result=="X"){
                            alert("您不能删除自己！")
                        }else {
                            alert("请先登录再操作！")
                        }
                        location.reload()
                    }
                });
            }

        }

        function isValidIDCard(id) {
            // 确保是18位身份证
            if (id.length != 18) {
                return false;
            }

            var regex = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X|x)$/;
            return regex.test(id);
        }

        function calculateGender(idCard) {
            const genderDigit = parseInt(idCard.charAt(16), 10); // 获取第17位数字

            return genderDigit % 2 === 0 ? '女' : '男';
        }

        function calculateAge(idCard) {
            const birthYear = parseInt(idCard.substring(6, 10), 10); // 提取出生年份
            const birthMonth = parseInt(idCard.substring(10, 12), 10); // 提取出生月份
            const birthDay = parseInt(idCard.substring(12, 14), 10); // 提取出生日

            const birthDate = new Date(birthYear, birthMonth - 1, birthDay); // 注意月份是从0开始的
            const today = new Date();

            let age = today.getFullYear() - birthYear;
            // 如果今天的日期小于出生日期的今年对应日期，则年龄减一
            if (today.getMonth() < birthMonth || (today.getMonth() === birthMonth && today.getDate() < birthDay)) {
                age--;
            }

            return age;
        }

        function add() {
            var idNum=document.getElementById("userIdNum").value
            if(isValidIDCard(idNum)){
                document.getElementById("userAge").value=calculateAge(idNum)
                document.getElementById("userGender").value=calculateGender(idNum)
            }else{
                document.getElementById("checkIdNum2").textContent="身份证格式不正确!"
                return;
            }

            let user = {
                name:document.getElementById("userName").value,
                age:document.getElementById("userAge").value,
                gender:document.getElementById("userGender").value,
                idNum:document.getElementById("userIdNum").value,
                province:document.getElementById("province").value,
                city:document.getElementById("city").value,
                region:document.getElementById("town").value,
                address:document.getElementById("userAddress").value,
                // creator:document.getElementById("creator").value,
                // createTime:document.getElementById("createTime").value,
                // updator:document.getElementById("updator").value,
                // updateTime:document.getElementById("updateTime").value
            }

            $.ajax({
                url: "userInfo/add",
                data: JSON.stringify(user),
                type: "post",
                dataType: "text",
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res == "Y") {
                        alert("添加成功")
                    }else if(res == "X"){
                        alert("该用户已存在")
                    }
                    else if(res == "N"){
                        alert("添加失败")
                    }else {
                        alert("请先登录再进行操作！")
                    }
                    location.reload();
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function delBatch() {
            if(document.getElementById("getId").value==""){
                alert("请至少选择一行！");
                return
            }
            $.ajax({
                url:"userInfo/delBatch",
                data:{
                    ids:document.getElementById("getId").value.substring(0,document.getElementById("getId").value.length-1)
                },
                type:"post",
                dataType:"text",
                success:function (res){
                    if(res=="X"){
                        alert("您不能删除自己！")
                    }else if(res=="Y"){
                        alert("删除成功！")
                    }else if(res=="N"){
                        alert("您只能删除自己添加的！")
                    }else {
                        alert("请先登录再进行操作！")
                    }
                },
                complete:function (err){
                    console.log(err)
                }

            })
        }

        function edit(item) {
            document.getElementById("id2").value=item.id,
            document.getElementById("userName2").value=item.name,
            document.getElementById("userAge2").value=item.age,
            document.getElementById("userGender2").value=item.gender,
            document.getElementById("userIdNum2").value=item.idNum,
            document.getElementById("province2").value=item.province,
            document.getElementById("city2").value=item.city,
            document.getElementById("town2").value=item.region,
            document.getElementById("userAddress2").value=item.address,
            document.getElementById("creator2").value=item.creator,
            document.getElementById("createTime2").value=item.createTime
            // document.getElementById("updator2").value=item.updator,
            // document.getElementById("updateTime2").value=item.updateTime
        }

        function saveEditData() {
            var idNum=document.getElementById("userIdNum2").value
            if(!isValidIDCard(idNum)){
                document.getElementById("checkIdNum").textContent="身份证格式不正确!"
                return;
            }
            let user = {
                id:document.getElementById("id2").value,
                name:document.getElementById("userName2").value,
                age:calculateAge(document.getElementById("userIdNum2").value),
                gender:calculateGender(document.getElementById("userIdNum2").value),
                idNum:document.getElementById("userIdNum2").value,
                province:document.getElementById("province2").value,
                city:document.getElementById("city2").value,
                region:document.getElementById("town2").value,
                address:document.getElementById("userAddress2").value,
                creator:document.getElementById("creator2").value,
                createTime:document.getElementById("createTime2").value,
                // updator:document.getElementById("updator2").value,
                // updateTime:document.getElementById("updateTime2").value
            }

            $.ajax({
                url: "userInfo/edit",
                data: JSON.stringify(user),
                type: "post",
                dataType: "text",
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res == "Y") {
                        alert("编辑成功")
                    }else if(res == "X") {
                        alert("该用户已存在")
                    }
                    else if(res == "N"){
                        alert("编辑失败")
                    }else {
                        alert("请先登录再进行操作！")
                    }
                    location.reload()
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function search() {
            var value1 = $("#zdName").val();
            var value2 = $("#zdType").val();
            var value3 = $("#zdstime").val();
            var value4 = $("#zdetime").val();

            console.log(value3)

            if(value1=="" || value2=="" || value3=="" || value4==""){
                alert("请输入所有条件框的值");
                return;
            }

            $.ajax({
                url: "userInfo/searchByFour",
                data: {
                    name: value1,
                    age:value2,
                    sTime:value3,
                    eTime:value4,
                },
                type: "get",
                success: function (result) {
                    if(result.length==0){
                        alert("查无此人！");
                        return;
                    }
                    console.log(result);

                    $("#userstab tbody").empty();
                    for (let i = 0; i < result.length; i++) {
                        item = result[i];

                        var chebox = $("<td></td>").append("<input type='checkbox' name='chkbox' value='"+item.id+"' onclick='getid("+item.id+")'>");
                        var id = $("<td></td>").append(item.id);
                        var name = $("<td></td>").append(item.name);
                        var age = $("<td></td>").append(item.age);
                        var gender = $("<td></td>").append(item.gender);
                        var idNum = $("<td></td>").append(item.idNum);

                        var province = $("<td></td>").append(item.province);
                        var city = $("<td></td>").append(item.city);
                        var region = $("<td></td>").append(item.region);
                        var pcr = $("<td></td>").append(province).append(city).append(region)

                        var address = $("<td></td>").append(item.address);

                        var editBtn = $("<button type='button' class='btn btn-primary' data-toggle='modal' data-target='#myModal2' onclick='edit(" + JSON.stringify(item) + ")'>编辑</button>");
                        var deleteBtn = $("<button onclick=del(" + JSON.stringify(item) + ")>删除</button>").addClass("btn btn-danger");
                        var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);

                        $("<tr></tr>")
                            .append(chebox)
                            .append(id)
                            .append(name)
                            .append(age)
                            .append(gender)
                            .append(idNum)
                            .append(pcr)
                            .append(address)
                            .append(btnTd)
                            .appendTo("#userstab tbody");
                    }
                }
            });
        }

        function beforemodify(){
            document.getElementById("id2").value=document.getElementById("id2").value.substring(0,document.getElementById("id2").value.length-1)

            if(document.getElementById("id2").value.includes(",") || document.getElementById("id2").value==""){
                alert("请选择一条数据进行修改！");
                location.reload()
            }
        }
        function modify(){
            let user = {
                sid: document.getElementById("id2").value,
                name:document.getElementById("aname2").value,
                type:document.getElementById("atype2").value,
                status:document.getElementById("astatus2").value,
                comment:document.getElementById("acomment2").value,
                startTime:document.getElementById("astime2").value
            }
            if(user.status=="正常"){
                $.ajax({
                    url: "dictionary/modify",
                    data: JSON.stringify(user),
                    type: "post",
                    dataType: "text",
                    contentType: "application/json;charset=utf-8",
                    success: function (res) {
                        if (res == "Y") {
                            alert("修改成功")
                        } else {
                            alert("修改失败")
                        }
                        location.reload()
                    },
                    complete: function (err) {
                        console.log(err)
                    }
                });
            }else {
                $.ajax({
                    url: "dictionary/modifytwo",
                    data: JSON.stringify(user),
                    type: "post",
                    dataType: "text",
                    contentType: "application/json;charset=utf-8",
                    success: function (res) {
                        if (res == "Y") {
                            alert("修改成功")
                        } else {
                            alert("修改失败")
                        }
                        location.reload()
                    },
                    complete: function (err) {
                        console.log(err)
                    }
                });
            }

        }

        function dc(){
            $.ajax({
                url: "dictionary/excelOut",
                type: "post",

                success: function (res) {
                    alert("导出成功！")
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function alldel(){
            document.getElementById("id2").value=document.getElementById("id2").value.substring(0,document.getElementById("id2").value.length-1)
            var sid=document.getElementById("id2").value
            console.log(sid)

            if(sid==""){
                alert("请勾选一个或多个进行删除！");
                return
            }

            $.ajax({
                url: "dictionary/alldel",
                data: {
                    sid:sid
                },
                type: "post",
                dataType: "text",

                success: function (res) {
                    if (res == "Y") {
                        alert("删除成功")
                    } else {
                        alert("删除失败")
                    }
                    location.reload()
                },
                complete: function (err) {
                    console.log(err)
                }
            });
        }

        function allChecked(){
            $.ajax({
            url: "userInfo/count",
            type: "post",
            success: function (res) {
                console.log(res)
                var chk=document.getElementsByName("allChecked")
                if(chk[0].checked){
                    document.getElementById("getId").value="";
                    for (let i = 0; i < res.length; i++) {
                        document.getElementById("getId").value+=res[i]+",";
                        document.getElementsByName("chkbox"+res[i])[0].checked=true
                    }
                }else {
                    document.getElementById("getId").value=""
                    for (let i = 0; i < res.length; i++) {
                        document.getElementsByName("chkbox"+res[i])[0].checked=false
                    }
                }
            },
            complete: function (err) {
                console.log(err)
            }
        });


        }
    </script>
</head>

<body>
<input type="hidden" id="getId">
<div class="form-group">

</div>

<div class="form-group">
    姓名：<input type="text" id="zdName"/>&nbsp;&nbsp;
    年龄：<input type="text" id="zdType"/>&nbsp;&nbsp;
    日期：<input type="date" id="zdstime" placeholder="开始时间">&nbsp;至&nbsp;<input type="date"id="zdetime" placeholder="结束时间">&nbsp;&nbsp;&nbsp;

    <button class="btn btn-success" onclick="search()">查询</button>
    <button class="btn btn-danger" onclick="delBatch()">批量删除</button>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">添加</button>

    <span class="top-right">
        <a href="./index.html"><button type="button" class="btn btn-success" id="login">登录</button></a>
        <button type="button" class="btn btn-danger" onclick="tExit()" id="exit">退出</button>
        欢迎<span id="showAccount"></span>登录
    </span>

    <!-- Button trigger modal -->
    <!-- Modal -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel1">新增用户信息</h4>
                </div>
                <div class="modal-body">
                    用户姓名：<input type="text" id="userName"><br><br>
                    <input type="hidden" id="userAge">
                    <input type="hidden" id="userGender">
                    用户身份证：<input type="text" id="userIdNum"><font style="color: red" id="checkIdNum2"></font><br><br>
                    省市区：<select name="province" id="province" class="province">
                                <option value="请选择">请选择</option>
                            </select>
                            <select name="city" id="city" class="city">
                                <option value="请选择">请选择</option>
                            </select>
                            <select name="town" id="town" class="town">
                                <option value="请选择">请选择</option>
                            </select><br><br>
                    详细地址：<input type="text" id="userAddress"><br><br>
<!--                    创建人：<input type="text" id="creator"><br><br>-->
<!--                    创建时间:<input type="date" id="createTime"><br><br>-->
<!--                    更新人：<input type="text" id="updator"><br><br>-->
<!--                    更新时间：<input type="date" id="updateTime"><br><br>-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="add()">添加</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">编辑用户信息</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id2">
                    用户姓名：<input type="text" id="userName2"><br><br>
                    <input type="hidden" id="userAge2">
                    <input type="hidden" id="userGender2">
                    用户身份证：<input type="text" id="userIdNum2"><font style="color: red" id="checkIdNum"></font><br><br>
                    省市区：<select name="province" id="province2" class="province">
                    <option value="请选择">请选择</option>
                </select>
                    <select name="city" id="city2" class="city">
                        <option value="请选择">请选择</option>
                    </select>
                    <select name="town" id="town2" class="town">
                        <option value="请选择">请选择</option>
                    </select><br><br>
                    详细地址：<input type="text" id="userAddress2">
                    <input type="hidden" id="creator2">
                    <input type="hidden" id="createTime2">
<!--                    更新人：<input type="text" id="updator2"><br><br>-->
<!--                    更新时间：<input type="date" id="updateTime2"><br><br>-->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="saveEditData()">编辑</button>
                </div>
            </div>
        </div>
    </div>

    <table class="table table-striped" id="userstab">
        <thead>
        <th><input type="checkbox" onclick="allChecked()" name="allChecked"></th>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>身份证</th>
        <th>省市区</th>
        <th>详细地址</th>
        <th>操作</th>
        </thead>
        <tbody>
        <!-- 显示遍历出来的用户数据 -->
        </tbody>
        <tfoot>
        <tr>
            <td colspan="3">
                当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据
            </td>
            <td colspan="5" align="center">
                <nav aria-label="Page navigation" id="pnav">
                    <%-- <ul class="pagination">--%>
                    <%-- <li class="disabled">--%>
                        <%-- <a href="#" aria-label="Previous">--%>
                            <%-- <span aria-hidden="true">&laquo;</span>--%>
                            <%-- </a>--%>
                        <%-- </li>--%>
                    <%-- <li><a href="#">1</a></li>--%>
                    <%-- <li class="active"><a href="#">2</a></li>--%>
                    <%-- <li><a href="#">3</a></li>--%>
                    <%-- <li><a href="#">4</a></li>--%>
                    <%-- <li><a href="#">5</a></li>--%>
                    <%-- <li>--%>
                        <%-- <a href="#" aria-label="Next">--%>
                            <%-- <span
                                    aria-hidden="true">&raquo;</span>--%>
                            <%-- </a>--%>
                        <%-- </li>--%>
                    <%-- </ul>--%>
                </nav>
            </td>
        </tr>
        </tfoot>
    </table>
</div>

<script>
    //省市区三级联查
    var province=$(".province")
    var city=$(".city")
    var town=$(".town")
    for(var i=0;i<provinceList.length;i++){
        addEle(province,provinceList[i].name);
    }
    function addEle(ele,value){
        var optionStr="";
        optionStr="<option value="+value+">"+value+"</option>";
        ele.append(optionStr);
    }
    function removeEle(ele){
        ele.find("option").remove();
        var optionStar="<option value="+"请选择"+">"+"请选择"+"</option>";
        ele.append(optionStar);
    }
    var provinceText,cityText,cityItem;
    province.on("change",function(){
        provinceText=$(this).val();
        $.each(provinceList,function(i,item){
            if(provinceText == item.name){
                cityItem=i;
                return cityItem
            }
        });
        removeEle(city);
        removeEle(town);
        $.each(provinceList[cityItem].cityList,function(i,item){
            addEle(city,item.name)
        })
    });
    city.on("change",function(){
        cityText=$(this).val();
        removeEle(town);
        $.each(provinceList,function(i,item){
            if(provinceText == item.name){
                cityItem=i;
                return cityItem
            }
        });
        $.each(provinceList[cityItem].cityList,function(i,item){
            if(cityText == item.name){
                for(var n=0;n<item.areaList.length;n++){
                    addEle(town,item.areaList[n])
                }
            }
        });
    });
</script>
</body>

</html>